<template>
	<view class="vote-list-container">
		<!-- <view class="vote-list-item">
			<view class="vote-l-item-hd">
				<view class="title-box">
					<view class="title">2020年华耐家居年会活动投票</view>
				</view>

				<view class="text-label">距投票结束还有:</view>
				<view class="text-date-box">
					<text class="text-date-num">2</text>
					<text class="text-date-text">天</text>
					
					<text class="text-date-num">23</text>
					<text class="text-date-text">时</text>
					
					<text class="text-date-num">59</text>
					<text class="text-date-text">分</text>
					
					<text class="text-date-num">59</text>
					<text class="text-date-text">秒</text>
				</view>

				<view class="text-label2">活动投票已结束</view>
				<view class="text-label2">活动投票未开始</view>

				<view class="footer-icon">
					<image src="../../static/vote/footer-icon.png"></image>
				</view>
				<view class="footer-icon2">
					<image src="../../static/vote/footer-icon.png"></image>
				</view>

			</view>
			<view class="vote-l-item-bd">
				<view class="title-box">授权的投票项</view>

				<view class="item">
					<view class="name">谢艳利</view>
					<view class="des">
						<view class="text">年会是否需要保留喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化</view>
					</view>
					<view class="label">投</view>
				</view>
				<view class="item">
					<view class="name">饶伟华</view>
					<view class="des">
						<view class="text">年会是否需要保留喝酒文化喝酒文化</view>
					</view>
					<view class="label">选</view>
				</view>
				<view class="item">
					<view class="name">谢艳利</view>
					<view class="des">
						<view class="text">年会是否需要保留喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化</view>
					</view>
					<view class="label">投</view>
				</view>
			</view>
		</view>

		<view class="vote-list-item">
			<view class="vote-l-item-hd">
				<view class="title-box">
					<view class="title">2020年华耐家居年会活动投票</view>
				</view>

				<view class="text-label">距投票结束还有:</view>
				<view class="text-date-box">
					<text class="text-date-num">2</text>
					<text class="text-date-text">天</text>

					<text class="text-date-num">23</text>
					<text class="text-date-text">时</text>

					<text class="text-date-num">59</text>
					<text class="text-date-text">分</text>

					<text class="text-date-num">59</text>
					<text class="text-date-text">秒</text>
				</view>
				<view class="text-label2">活动投票已结束</view>
				<view class="text-label2">活动投票未开始</view>

				<view class="footer-icon">
					<image src="../../static/vote/footer-icon.png"></image>
				</view>
				<view class="footer-icon2">
					<image src="../../static/vote/footer-icon.png"></image>
				</view>

			</view>
			<view class="vote-l-item-bd">
				<view class="title-box">授权的投票项</view>

				<view class="item">
					<view class="name">谢艳利</view>
					<view class="des">
						<view class="text">年会是否需要保留喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化</view>
					</view>
					<view class="label">投</view>
				</view>
				<view class="item">
					<view class="name">饶伟华</view>
					<view class="des">
						<view class="text">年会是否需要保留喝酒文化喝酒文化</view>
					</view>
					<view class="label">选</view>
				</view>
				<view class="item">
					<view class="name">谢艳利</view>
					<view class="des">
						<view class="text">年会是否需要保留喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化喝酒文化</view>
					</view>
					<view class="label">投</view>
				</view>
			</view>
		</view> -->

		<view v-if="voteThemeList.length > 0" v-for="(vote, index) in voteThemeList" :key="index" class="vote-list-item" @tap="toSubmitPage(vote)">
			<view class="vote-l-item-hd">
				<view class="title-box">
					<view class="title">{{vote.name}}</view>
				</view>

				<view v-if="vote.status_code === 1" class="text-label">距投票结束还有:</view>
				<view v-if="vote.status_code === 1" class="text-date-box">
					<text class="text-date-num">{{vote.int_day || '0'}}</text>
					<text class="text-date-text">天</text>
					
					<text class="text-date-num">{{vote.int_hour || '00'}}</text>
					<text class="text-date-text">时</text>
					
					<text class="text-date-num">{{vote.int_minute || '00'}}</text>
					<text class="text-date-text">分</text>
					
					<text class="text-date-num">{{vote.int_second || '00'}}</text>
					<text class="text-date-text">秒</text>
				</view>
				<view v-if="vote.status_code !== 1" class="text-label2">{{vote.status}}</view>
				
				<view class="footer-icon">
					<image src="../../static/vote/footer-icon.png"></image>
				</view>
				<view class="footer-icon2">
					<image src="../../static/vote/footer-icon.png"></image>
				</view>
			</view>
			<view class="vote-l-item-bd">
				<view class="title-box">授权的投票项</view>
				<view v-if="vote.items" v-for="(item, k) in vote.items" :key="k" class="item">
					<view class="name">{{item.votePerson || ''}}</view>
					<view class="des">
						<!-- <view class="text">{{item.remark}}</view> -->
						<view class="text">{{item.name}}</view>
					</view>
					<view class="label">{{item.votePerson?(item.isVote == 2 ? '选' : '投'):''}}</view>
				</view>
			</view>
		</view>
		
		<view v-if="voteThemeList.length === 0" class="default-no-data">暂无数据</view>
		
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		getVoteThemeAllList,
		getVoteItemsList
	} from '../../common/service.js'

	export default {
		data() {
			return {
				canGetMore: true,
				pageNum: 1,
				loginName: this.CONFIG.user.name || '', // 当前登录人
				voteThemeList: []
			}
		},
		onLoad() {
			const that = this;
			// that.LOGINACTION(function() {
				that.getVoteThemeList(false, function(data) {
					that.getVoteItems(data)
				})
			// });
		},
		methods: {
			toSubmitPage(vote) {
				console.log('查看议题详情:');
				console.log(vote);
				// var id = vote.id;
				// 活动类型：vote:投票 || elect:选举
				var type = 'vote';
				uni.navigateTo({
				    url: './submit?id=' + vote.id + '&type=' + type + '&name=' + (vote.name || '') + '&des=' + (vote.remark1 || '')
				});
			},
			isDuringDate(beginDateStr, endDateStr) {
				// 比较当前时间是否在有效的时间段内
				const curDate = new Date();
				const beginDate = new Date(beginDateStr);
				const endDate = new Date(endDateStr);
				let flag = false;
				if (curDate >= beginDate && curDate <= endDate) {
					flag = true;
				}
				return flag;
			},
			getVoteItems(data) {
				const that = this;
				if (data.length > 0) {
					data.forEach(function(vote) {
						vote.items = [];
						vote.timer = null; // 倒计时计时器字段
						vote.int_day = null;
						vote.int_hour = null;
						vote.int_minute = null;
						vote.int_second = null;
						if (vote.effectStart && vote.effectEnd) {
							// 计算时间，执行倒计时计时器vote.timer = Fn
							const flag = that.isDuringDate(vote.effectStart, vote.effectEnd);
							if (flag) {
								vote.status_code = 1;
								// 开始执行计时器，并在effectEnd时自动销毁计时器
								vote.timer = setInterval(function() {
									const time_start = new Date(vote.effectStart);  // 开始时间
									const timeStart = time_start.getTime(); // 开始时间的时间戳
									
									const time_now = new Date(); // 当前时间
									const timeNow = time_now.getTime(); // 当前时间的时间戳
									
									let date1 = ''; // 参与计算的开始时间
									if (timeNow < timeStart) {
										date1=timeStart;
									} else {
										date1 = timeNow;
									}
									
									const time_end = new Date(vote.effectEnd);  // 结束时间
									const timeEnd = time_end.getTime(); // 时间戳
									
									// 计算2个时间戳的差
									const time_distance = timeEnd - date1;
									
									if (time_distance >= 0) {
									    // 计算相差天数
										vote.int_day = Math.floor(time_distance / (24 * 3600 * 1000)); // 相差天数
										// 计算相差小时数
										const leave1 = time_distance % (24 * 3600 * 1000); // 计算天数后 剩余的毫秒数
										vote.int_hour = Math.floor(leave1 / (3600 * 1000)); // 相差小时数
										// 计算相差分钟数
										const leave2 = leave1 % (3600 * 1000); // 计算小时数后 剩余的毫秒数
										vote.int_minute = Math.floor(leave2 / (60 * 1000)); // 相差分钟数
										// 计算相差秒数
										const leave3 = leave2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
										vote.int_second = Math.round(leave3 / 1000); // 相差秒数
											
										// 时分秒为单数时、前面加零站位
										if(vote.int_hour < 10) {
											vote.int_hour = '0' + vote.int_hour;
										}
										if(vote.int_minute < 10) {
											vote.int_minute = '0' + vote.int_minute;
										}
										if(vote.int_second < 10) {
											vote.int_second = '0' + vote.int_second;
										}
									} else {
										clearInterval(vote.timer);
										// 活动已结束
										vote.int_day = null;
										vote.int_hour = null;
										vote.int_minute = null;
										vote.int_second = null;
										vote.status = '活动投票已结束';
										vote.status_code = 2;
									}
								}, 1000)
							} else {
								vote.int_day = null;
								vote.int_hour = null;
								vote.int_minute = null;
								vote.int_second = null;
								
								if (vote.timer) {
									clearInterval(vote.timer);
									// 活动已结束
									vote.status = '活动投票已结束';
									vote.status_code = 2;
								} else {
									// 判断当前时间是在effectStart之前还是在effectEnd之后。若在effectStart之前，则该议题活动未开始；若在effectEnd之后，则表示该议题活动已结束。
									// status:活动投票未开始
									const time_start = new Date(vote.effectStart);  // 开始时间
									const timeStart = time_start.getTime(); // 开始时间时间戳
									
									const time_now = new Date(); // 当前时间
									const timeNow = time_now.getTime(); // 当前时间时间戳
									
									if (timeNow < timeStart) {
										vote.status = '活动投票未开始';
										vote.status_code = 0;
									} else {
										// status:活动投票已结束
										vote.status = '活动投票已结束';
										vote.status_code = 2;
									}
								}
							}
						}
						const params = {
							themeId: vote.id,
							hn: that.CONFIG.user.id
						};
						getVoteItemsList(params, function(resuser) {
							if (resuser && resuser.statusCode == 200) {
								const rs = resuser.data;
								console.log('投票项列表结果:');
								console.log(rs);
								if (rs.code == 200) {
									vote.items = rs.rows || [];
									console.log(vote);
								}
							}
						}, function(e) {
							console.log('获取投票项列表失败:');
							console.log(e);
						});
					})
					that.voteThemeList = that.voteThemeList.concat(data);
					console.log(that.voteThemeList);
				}
			},
			getMoreData: function() {
				const that = this;
				console.log('进入加载更多的函数...是否可加载更多数据:');
				console.log(that.canGetMore);
				if (that.canGetMore == false) {
					return;
				}
				that.getVoteThemeList(true, function(data) {
					that.getVoteItems(data)
				});
			},
			getVoteThemeList(more, call) {
				const that = this;
				if (!(that.CONFIG.user && that.CONFIG.user.id)) {
					that.$refs.uToast.show({
						title: '获取当前登录人信息失败，请退出重新登录',
						type: 'error',
						duration: 3000,
						callback: function() {
							return;
						}
					});
				}
				if (more === true) {
					that.pageNum = that.pageNum + 1;
				}
				const params = {
					hn: that.CONFIG.user.id,
					pageNum: that.pageNum,
					pageSize: 10
				};
				getVoteThemeAllList(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						console.log('投票议题列表结果:');
						console.log(rs);
						if (rs.code == 200) {
							const myData = rs.rows || [];
							if (myData.length < 10) {
								that.canGetMore = false;
							}
							console.log(myData);
							if (myData.length > 0) {
								if (call) {
									call(myData);
								}
							}
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取投票议题列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							} else {
								that.$refs.uToast.show({
									title: rs.errMsg || '获取投票议题列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					}
				}, function(e) {
					console.log('获取投票议题列表失败:');
					console.log(e);
				});
			},
		},
		onReachBottom() { // 与methods 同级
			console.log('页面到底了');
			this.getMoreData();
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background: #0A1B87;
	}

	.vote-list-container {
		width: 100%;
		padding: 0 0 265rpx;
		margin: 0;
		background: #0A1B87;
	}
	
	.default-no-data{
		width: 100%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
		font-size: 38rpx;
		color: #FFFFFF;
		margin-top: 50rpx;
	}

	.vote-list-item {
		width: 100%;
		padding-bottom: 50rpx;
	}

	.vote-l-item-hd {
		width: 100%;
		height: 462rpx;
		background: url(../../static/vote/head-bg.png);
		background-repeat: no-repeat;
		background-size: 100% 462rpx;
		background-position: center center;
		position: relative;
	}

	.vote-l-item-hd .title-box {
		width: 667rpx;
		height: 170rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 26rpx;
		position: absolute;
		top: 60rpx;
		left: 42rpx;
	}

	.vote-l-item-hd .title-box .title {
		flex: 1;
		text-align: center;
		line-height: 56rpx;
		padding: 10rpx;
		border-radius: 26rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #14378F;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.vote-l-item-hd .text-label {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #252525;
		position: absolute;
		top: 348rpx;
		left: 0;
	}

	.vote-l-item-hd .text-label2 {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #252525;
		position: absolute;
		top: 370rpx;
		left: 0;
	}

	.vote-l-item-hd .text-date-box {
		width: 100%;
		text-align: center;
		position: absolute;
		top: 392rpx;
		left: 0;
	}

	.vote-l-item-hd .text-date-box .text-date-num {
		display: inline-block;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		background-color: #2B2B2B;
		border-radius: 4rpx;
		padding-left: 7rpx;
		padding-right: 7rpx;
		margin-right: 7rpx;
	}

	.vote-l-item-hd .text-date-box .text-date-text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #252525;
		margin-right: 7rpx;
	}

	.vote-l-item-hd .footer-icon,
	.vote-l-item-hd .footer-icon2 {
		width: 45rpx;
		height: 105rpx;
		position: absolute;
		top: 426rpx;
	}

	.vote-l-item-hd .footer-icon {
		left: 68rpx;
	}

	.vote-l-item-hd .footer-icon2 {
		right: 75rpx;
	}

	.vote-l-item-hd .footer-icon image,
	.vote-l-item-hd .footer-icon2 image {
		width: 100%;
		height: 100%;
	}

	.vote-l-item-bd {
		width: 690rpx;
		background-color: #1D62D8;
		margin-left: 30rpx;
		margin-top: 26rpx;
		border-radius: 10rpx;
		padding-top: 30rpx;
		padding-bottom: 79rpx;
	}

	.vote-l-item-bd .title-box {
		width: 285rpx;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		background: url(../../static/vote/item-title.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		border-radius: 32rpx;
		margin: 0 auto 30rpx auto;
	}

	.vote-l-item-bd .item {
		width: 623rpx;
		height: 170rpx;
		background: url(../../static/vote/item-bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		margin: 0 auto;
		margin-bottom: 30rpx;
		display: flex;
		position: relative;
	}

	.vote-l-item-bd .item .name {
		width: 106rpx;
		height: 106rpx;
		text-align: center;
		line-height: 106rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		border-radius: 50%;
		margin-top: 32rpx;
		margin-left: 20rpx;
	}

	.vote-l-item-bd .item .des {
		flex: 1;
		margin-left: 21rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.vote-l-item-bd .item .des .text {
		flex: 1;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #731D03;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.vote-l-item-bd .item .label {
		width: 141rpx;
		height: 170rpx;
		text-align: center;
		line-height: 170rpx;
		font-size: 60rpx;
		font-family: FZDaHei-B02S;
		font-weight: bold;
		color: #FF772D;
		margin-left: 27rpx;
	}
</style>
